<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>职员管理</title>
    <link rel="stylesheet" href="__ROOT__/static/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="__ROOT__/static/plugins/webuploader/style.css">
    <link rel="stylesheet" href="__ROOT__/static/plugins/webuploader/webuploader.css">
    <style>
        .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
        .file-item .info{overflow: hidden;}
        .uploader-list{width: 100%; overflow: hidden;}
        .webuploader-pick{
             background-color: #00b7ee;
             width: 100px;
             height: 40px;
             margin:auto 13px;
        }
        input{
            width: 230px;
            height: 35px;
        }
        th{
            text-align: center;
            width:15%;
        }
    </style>
</head>
<body>
<form class="formData" method="post">
   <table class="table table-hover table-striped table-bordered wst-form">
       <input type="hidden" id="id" value="{$res.staff_id}">
       <tr>
           <th style="line-height: 35px;" >账号</th>
           <td style="width:205px;"><input id="loginName" type="text" value="{$res.login_name}" name="name"/></td>
       </tr>
       <tr>
           <th>编号</th>
           <td><input type="text" id="no" value="{$res.staff_no}"/></td>
       </tr>
       <tr>
           <th style="line-height:160px;">头像</th>
           <td>
               <input type="hidden" id="imgSavePath" value="">
               <div style="height: 140px;width: 150px;">
                   {empty name="$res.staff_photo"}
               <img class="ImgPreview" style="width: 140px;height: 140px;" src="__ROOT__/upload/staffs/staff.png">
                   {else /}
                   <img class="ImgPreview" style="width: 140px;height: 140px;" src="__ROOT__/{$res.staff_photo}">
                   {/empty}
               </div>
               <div id="ImgPicker" style="line-height: 40px;" >上传图片</div>
               <div style='margin-left:5px;float:left'>图片大小:150 x 150 (px)，格式为 gif, jpg, jpeg, png</div>
           </td>
       </tr>
      <tr>
          <th>工作状态</th>
          <td>
              <input type="radio" name="status" {if condition='$res.work_status eq 1'} checked='checked'{/if} value="1">在职
              <input type="radio" name="status" {if condition='$res.work_status eq 0'} checked='checked'{/if} value="0">离职
          </td>
      </tr>
       <tr>
           <th>账号状态</th>
           <td>

               <input type="radio" name="name1" {if condition='$res.staff_status eq 1'} checked='checked'{/if} value="1">启用
               <input type="radio" name="name1" {if condition='$res.staff_status eq 0'} checked='checked'{/if} value="0">停用
           </td>
       </tr>
   </table>
    <div style="text-align: center;">
        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
        <button type="button" class="btn btn-primary" onclick='javascript:location.href="{:url('admin/staff/index')}"'>返回</button>
    </div>
</form>
</body>
</html>
<script src="__ROOT__/static/plugins/jquery-3.2.1/jquery-3.2.1.js"></script>
<script src="__ROOT__/static/plugins/webuploader/webuploader.js"></script>
<script src="__ROOT__/static/plugins/layer/layer.min.js"></script>
<!--<script src="__ROOT__/static/plugins/webuploader/upload.js"></script>-->
<script>
    //初始化webuploader
    $(function(){
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            //formdata
            formData: {
                dir: '',
                width: 200,
                height: 200
            },
            // swf文件路径
            swf: 'static/plugins/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: "{:url('admin/Staff/upload')}",
//				fileVal: 'pic',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#ImgPicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            duplicate:true
        });
        //文件上传成功
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file,response ) {
            var data = response._raw;
            //如果返回的路径是json对象需要转换，否则
//            var file = JSON.parse(data).file;
            var path1 = '__ROOT__/'+'upload/'+'staffs/'+data;
            $('.ImgPreview').attr('src',path1);
            $('#imgSavePath').val('upload/staffs/'+data);
        })
    })

    function save(){
       var params = {};
       params.id = $('#id').val();
       params.loginName = $.trim($('#loginName').val());
       params.no = $('#no').val();
       params.staffPhoto = $('#imgSavePath').val();
       params.workStatus=$(":radio[name='status']:checked").val();
       params.staffStatus=$(":radio[name='name1']:checked").val();
       $.post("{:url('admin/Staff/toEdit')}",params,function(data){
           if(data==1){
               layer.msg('修改成功', {icon: 1,time:1000});
               setTimeout('window.location.href="{:url(\'admin/Staff/index\')}"',1500);
           }else{
               layer.msg('修改失败', {icon: 1,time:1000});
           }
        });
    }

</script>